import React,{ Component } from "react";
import { Table } from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';
import { arrayMoveImmutable } from 'array-move';

const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
const SortableItem = sortableElement(props => <tr {...props} />);
const SortableContainer = sortableContainer(props => <tbody {...props} />);

export default class SortableTable extends Component {
    constructor(props){
        super(props);
        this.props= props;
        this.state = {
            dataSource: this.props.dataSource,
            columnsB:this.props.columnsB?this.props.columnsB:[]
        }
    }

    shouldComponentUpdate(nextProps,nextState){
        if(!this.arrayEqual(nextProps.dataSource,this.state.dataSource)){
            if (this.state.dataSource.length===0){
                this.setState({dataSource:nextProps.dataSource})
            }
            return true
        }
        return false
    }

    arrayEqual = (arr1, arr2)=> {
        if (arr1 === arr2) return true;
        if (arr1.length !== arr2.length) return false;
        for (let i = 0; i < arr1.length; ++i) {
            if (arr1[i] !== arr2[i]) return false;
        }
        return true;
    }

    onSortEnd = ({ oldIndex, newIndex }) => {
        const { dataSource } = this.state;
        if (oldIndex !== newIndex) {
        const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
        console.log('Sorted items: ', newData);
        this.setState({ dataSource: newData });
        }
    };

    DraggableContainer = props => (
        <SortableContainer
        useDragHandle
        disableAutoscroll
        helperClass="row-dragging"
        onSortEnd={this.onSortEnd}
        {...props}
        />
    );

    DraggableBodyRow = ({ className, style, ...restProps }) => {
        const { dataSource } = this.state;
        // function findIndex base on Table rowKey props and should always be a right array index
        const index = dataSource.findIndex(x => x.index === restProps['data-row-key']);
        return <SortableItem index={index} {...restProps} />;
    };

    render() {
        var { dataSource } = this.state;
        const columnsA = [
            {
            title: 'Sort',
            dataIndex: 'sort',
            width: 30,
            className: 'drag-visible',
            render: () => <DragHandle />,
            },
        ];



        var columns = columnsA.concat(this.state.columnsB);


    return (
        <Table
            pagination={false}
            dataSource={dataSource}
            columns={columns}
            rowKey="index"
            onchange = {this.onchange}
            components={{
            body: {
                wrapper: this.DraggableContainer,
                row: this.DraggableBodyRow,
            },
            }}
        />
    );
  }

}

